<!-- 
	date:2023-06-28
	author:xiaoya
	desc:合同维保统计页面
 -->
<template>
    <view class="wrapp">
        <!-- 在保电梯统计start -->
        <view class="card">
            <view class="title">
                <view class="title_L">
                    <text>维保中电梯-统计</text>
                </view>
            </view>
            <default-block v-if="!contractUnder.chartData.series"></default-block> 
            <view class="card-content">
                <view class="chart-block">
                    <l-echart class="ring" ref="contractUnder"></l-echart>
                </view>
                <view class="title-d">
					<view class="d_total">
                        维保中电梯总数: <text>{{contractUnder.count}}</text>
                    </view>
					<view class="key-setting" @click.stop="toUnderDetail('contractMain')">
						详情<uni-icons type="forward" :size="16" color='#0091ff' style="margin-left: 4rpx;"></uni-icons>
					</view>
				</view>
            </view>
        </view>
        <!-- 在保电梯统计end -->

        <!-- 脱保电梯统计start -->
        <view class="card">
            <view class="title">
                <view class="title_L">
                    <text>暂停维保电梯-统计</text>
                </view>
            </view>
            <default-block v-if="!contractCast.chartData.series"></default-block> 
            <view class="card-content">
                <view class="chart-block">
                    <l-echart class="ring" ref="contractCast"></l-echart>
                </view>
                <view class="title-d">
					<view class="d_total">
                          暂停维保电梯总数: <text>{{contractCast.count}}</text>
                    </view>
					<view class="key-setting" @click.stop="toUnderDetail('contractCast')">
						详情<uni-icons type="forward" :size="16" color='#0091ff' style="margin-left: 4rpx;"></uni-icons>
					</view>
				</view>
            </view>
        </view>
        <!-- 脱保电梯统计end -->
    </view>
</template>

<script>
import * as echarts from '@/subpages/components/lime-echart/static/echarts.min';
import LEchart from '@/subpages/components/lime-echart/components/l-echart/l-echart.vue';
import {contractPieOpt } from '../maintain/chartSet.js';
import {getContractStatisticInfo} from '@/apis/contract.js';
import defaultBlock from '../components/default.vue';
export default {
	components:{
		defaultBlock,
		LEchart
	},  
	data() {
		return {
			// 在保电梯统计
			contractUnder:{
				colors: [ '#FF89A8','#FBCB92','#6FA9FF',],
				tags: [
					{ 'name': '脱保',nameType:'(待续签)',  value: 0, keys: 'disCreateCount',keyp: 'disCreateRatio', },
					{ 'name': '非在保',nameType:'(拟定保养)',value: 0, keys: 'aboutCreateCount',keyp: 'aboutCreateRatio', },
					{ 'name': '在保',nameType:'(合同期内)',value: 0, keys: 'inTimeCount',keyp: 'inTimeRatio', },
				],
				count: 0,
				linedata: {
					categories: [],
					series: [],
				},
				chartData: {
					series: [],
				},
			},
			// 脱保电梯统计
			contractCast:{
				colors: [ '#FF89A8'],
				tags: [
					{ name: '暂停维保电梯', value: 2, keys: 'overdueContractCount' },
				],
				count: 0,
				linedata: {
					categories: [],
					series: [],
				},
				chartData: {
					series: [],
				},
			},
			totalObj:{},
		};
	},
	created() {
		this.getContractUnder();
	},  
	methods: {

		// 电梯统计
		getContractUnder() {
			uni.showLoading({
				title:'加载中...',
				mask:true
			});
			Promise.all([getContractStatisticInfo()]).then(([under])=>{
				uni.hideLoading();
				if (under.code === 200) {
					let obj = under.data || {};
					let arr = this.contractUnder.tags;
					this.contractUnder.count = obj.enContractCount;
					this.contractCast.count = obj.overdueContractCount;
					for (let attr in obj) {
						arr.forEach((item, i) => {
							if (item.keys == attr) {
								arr[i].value = obj[attr];
							}
							if (item.keyp == attr) {
								arr[i].pro = obj[attr];
							}
						});
					}
					this.contractUnder.chartData.series = arr;
					this.contractCast.chartData.series = [{
						'name': '暂停维保电梯',
						value: obj.overdueContractCount, 
						pro: '100'
					}];
					this.setPieChart('contractUnder',{richWidth:55});
					this.setPieChart('contractCast',{richWidth:100});
				}
			});
		},
		// 详情
		toUnderDetail(type) {
			let count = 1;
			if (type === 'contractCast') {
				count = 2;
			}
			uni.navigateTo({
				url:'/subpages/statistics/mainElevator/mainElevatorDetail?type=' + count
			});
		},
		setPieChart(chart,obj = {}) {  // 绘制环形图
			let list = this[chart].chartData.series;
			let chartData = [];
			for (let i = 0; i < list.length; i++) {
				chartData.push({
					value: list[i].value,
					name: list[i].name,
					pro: list[i].pro || '',
					nameType:list[i].nameType || '',
					desc:list[i].desc || '',
				});
			}
			console.log(chartData,'chartData');
			this[chart].opts = contractPieOpt({ color: this[chart].colors, data: chartData,richWidth:obj.richWidth,contract:true},chart);
			this.$nextTick(() => {
				this.$refs[chart].init(echarts, chartF => {
					chartF.setOption(this[chart].opts);
					chartF.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: 0
					});
					chartF.on('legendselectchanged', (e) => { 
						chartF.dispatchAction({ type: 'downplay', seriesIndex: 0 }); // 处理图例点击导致选中与默认选中重叠问题
					});
					chartF.on('mouseover', (e) => {
						if (e.dataIndex !== 0) { // 当鼠标移除的时候 使默认的索引值去除默认选中
							chartF.dispatchAction({ type: 'downplay', dataIndex: 0 });
						}
					});
				});
			});
		},
	}
};
</script>
<style>
page{
  background: #f3f6f8;
}
</style>
<style lang="scss" scoped>
.wrapp {
    .card {
        background-color: #fff;
        width: calc(100% - 80rpx);
        padding: 20rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        border-radius: 8rpx;

        .title {
            display: flex;
            height: 56rpx;

            .title_L {
                flex: 1;
                font-size: 32rpx;
                border-left: 4rpx solid #ffffff;
                color: #333333;
                font-weight: bold;
                // margin-left: -19rpx;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
            }

            .titleTime {
                font-size: 24rpx;
                font-weight: 400;
                color: #666666;
                padding: 11rpx 15rpx;
                border: 2rpx solid #d5d5d5;
                border-radius: 4rpx;
            }
        }

        .card-content {
            .title-d {
                font-size: 28prx;
                border-left: 4rpx solid #ffffff;
                line-height: 28rpx;
                padding-left: 16rpx;
                color: #666;
                font-weight: bold;
                margin-left: -19rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 18rpx;
                height: 50rpx;
                .d_total{
                    flex: 1; 
                    padding-left: 60rpx;
                    font-weight: 400;
                    text{
                        display: inline-block;
                        margin-left: 10rpx;
                        font-weight: 600;
                        color: #333;
                    }
                }
                .key-setting {
                    font-size: 25rpx;
                    font-weight: normal;
                    flex: 1; 
                    text-align:right; 
                    color:#0091ff;
                }
            }
        }

        .card-time {
            display: flex;
            margin: 20px 0;

            .time_L {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border-right: 2rpx #eee solid;
                color: #666666;
                font-size: 24rpx;

                &_num {
                    color: #000;
                    font-size: 36rpx;
                    font-weight: 600;
                }
            }

            .time_R {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #666666;
                font-size: 24rpx;

                &_num {
                    color: #000;
                    font-size: 36rpx;
                    font-weight: 600;
                }
            }
        }
    }

    .chart-block {
        width: 100%;
        height: 200px;

        .ring {
            width: 100%;
            height: 200px;
        }
    }

}
</style>